<template>
  <div class="analysisContainer">
    <div class="mapToolBar">
      <div class="title-bar" style="width: 20%;">
        <img class="title-icon" :src="require('@/assets/icon-svg2/ICON-title.svg')"/>
        <span class="title-text"> <span>空间分析</span> </span>
      </div>

      <div class="mapToolBarContainer">
        <!--工具栏样式风格1 ===开始=== -->
        <div @click="layerControl">
          <a-icon type="block"/>
          <span style="margin-left: 5px;">图层控制</span>
          <a-divider type="vertical"
                     style="padding: 0 !important;top: 0.3em !important;"/>
        </div>

        <div>
          <a-dropdown :trigger="['click']">
            <a class="ant-dropdown-link" style="color: #FFFFFF;"
               @click="e => e.preventDefault()">
              <a-icon type="tool"/>
              分析工具
              <a-icon type="caret-down"/>
            </a>

            <a-menu slot="overlay" style="margin: 5px 0;">
              <a-menu-item v-for="(item, index) in menuList" :key="index">
                <a href="javascript:;" :style="{borderBottom: index == menuList.length - 1?'':'1px solid #E3E3E3'}"
                   @click="handle_function_call(item.funcName, item.key)">{{ item.title }}</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
        <!--工具栏样式风格1 ===结束=== -->

        <!--工具栏样式风格2 ===开始=== -->
        <!--<div v-for="(item, index) in menuList" :key="index"-->
        <!--@click="handle_function_call(item.funcName, item.key)">-->
        <!--<span :class="{analysisText: isActive == item.key ? true : false}">{{item.title}}</span>-->
        <!--<a-divider v-if="index != (menuList.length - 1)" type="vertical"-->
        <!--style="padding: 0 !important;top: 0.3em !important;"/>-->
        <!--</div>-->
        <!--工具栏样式风格2 ===结束=== -->
      </div>
    </div>

    <div class="mapStatusBar">
      <div>【当前选中：{{ selectedFeature.featureId }}】</div>
      <div>【状态：{{ operatedStatusText }}】</div>
    </div>

    <div id="mapContainer" class="mapContainer">
      <OlMapN ref="olMapN"
              :mapId="'pipeAnalysisMap'"
              v-bind:baseMapData="baseMapData"
              v-bind:featuresData="featuresData"
              v-bind:pointImgUrlMapData="device_type_imgUrlMap"/>
    </div>

    <MapPopup ref="refMapPopup" :popupCloseCallback="onPopupWindowClose">
      <!--图层弹窗内容-->
      <div style="display: none;" id="map-layer-box">
        <div :style="{maxHeight: '462px', overflowY: 'auto'}">
          <a-tree v-model="checkedKeys"
                  checkable
                  :expanded-keys="expandedKeys"
                  :auto-expand-parent="autoExpandParent"
                  :selected-keys="selectedKeys"
                  :tree-data="treeData"
                  @expand="onExpand"
                  @select="onSelect"
                  @check="onCheck"/>
        </div>
      </div>

      <!--坐标定位弹窗内容-->
      <div style="display: none;" id="position-locator-box">
        <a-form-model v-model="coordinateXY" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
          <a-form-model-item label="X 坐标">
            <a-input-number size="small" style="width: 170px;" :step="0.00001" :value="coordinateXY.locationX"
                            @change="value => coordinateXY.locationX = value"/>
          </a-form-model-item>

          <a-form-model-item label="Y 坐标">
            <a-input-number size="small" style="width: 170px;" :step="0.00001" :value="coordinateXY.locationY"
                            @change="value => coordinateXY.locationY = value"/>
          </a-form-model-item>

          <div style="width: 100%;margin-top: 16px;text-align: center;">
            <a-button size="small" type="primary" @click="localToXY">定位</a-button>
            <a-button size="small" style="margin-left: 10px" @click="resetXY">清空</a-button>
          </div>
        </a-form-model>
      </div>

      <!--交叉路口定位弹窗内容-->
      <div style="display: none;" id="crossroad-locator-box">
        <a-form-model v-model="roadXY" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
          <a-form-model-item label="道路图层名称">
            <a-select size="small" v-model="roadXY.layerId" placeholder="选择道路图层" @change="onRoadXYSelectChange">
              <a-select-option v-for="(option, index) in roadXY.layerData"
                               v-bind:value="option.id"
                               v-bind:key="index">
                {{ option.layerName }}
              </a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item label="道路一">
            <a-select size="small"
                      show-search
                      v-model="roadXY.road1"
                      placeholder="选择道路"
                      @search="onRoad1Search"
                      @change="onRoad1Change"
                      :default-active-first-option="false"
                      :show-arrow="false"
                      :filter-option="false"
                      :not-found-content="null">
              <a-select-option
                  v-for="(option, index) in roadXY.roadData1"
                  v-bind:value="option.id"
                  v-bind:key="index"
                  v-bind:optVal="option">{{ option.idName }}
              </a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item label="道路二">
            <a-select size="small"
                      show-search
                      v-model="roadXY.road2"
                      placeholder="选择道路"
                      @search="onRoad2Search"
                      @change="onRoad2Change"
                      :default-active-first-option="false"
                      :show-arrow="false"
                      :filter-option="false"
                      :not-found-content="null">
              <a-select-option
                  v-for="(option, index) in roadXY.roadData2"
                  v-bind:value="option.id"
                  v-bind:key="index"
                  v-bind:optVal="option">{{ option.idName }}
              </a-select-option>
            </a-select>
          </a-form-model-item>

          <div style="width: 100%;margin-top: 16px;text-align: center;">
            <a-button size="small" type="primary" @click="localToRoadXY">定位</a-button>
          </div>
        </a-form-model>
      </div>

      <!--关阀预案弹窗内容-->
      <div style="display: none;" id="valve-close-analysis-box">
        <div>
          <a-form-model layout="inline">
            <a-form-model-item>
              <a-button size="small" type="primary" icon="search"
                        @click="selectValveClosingPlanStart">点选
              </a-button>
            </a-form-model-item>

            <a-form-model-item>
              <a-button size="small" type="primary" icon="delete"
                        style="margin: 0 10px;"
                        @click="cleanSelectValveClosingPlanStart">清除
              </a-button>
            </a-form-model-item>

            <a-form-model-item>
              <a-button size="small" type="primary" icon="search"
                        @click="valveClosingPlanAnalysis">爆管分析
              </a-button>
            </a-form-model-item>

            <a-form-model-item>
              <a-button size="small" type="primary" icon="export"
                        style="margin-left: 10px;"
                        @click="valveClosingPlanExport">导出
              </a-button>
            </a-form-model-item>
          </a-form-model>
        </div>

        <div>
          <a-row :gutter="10">
            <a-col :span="7">
              <div style="height: 300px;border: 1px solid #01853c;">
                <div style="margin-left: 5px">
                  <a-checkbox :indeterminate="valveClosingPlan.indeterminate"
                              :checked="valveClosingPlan.checkAll"
                              @change="onCheckAllChangeValveClosingPlan">所有关阀方案
                  </a-checkbox>
                </div>
                <div class="valveClosingPlan">
                  <a-checkbox-group v-model="valveClosingPlan.checkedList"
                                    :options="valveClosingPlan.plainOptions"
                                    @change="onChangeValveClosingPlan"/>
                </div>
              </div>
            </a-col>

            <a-col :span="17">
              <a-table size="small" class="beauty-scroll" bordered style="width: 100%;overflow-x: scroll;"
                       :columns="valveClosingPlan.table.columns"
                       :data-source="valveClosingPlan.table.tableData"
                       :pagination="{ pageSize: 10 }"
                       :scroll="{ x: 1000, y: 400 }"
                       :customRow="valveClosingPlanRowClick">
              </a-table>
            </a-col>
          </a-row>

          <!--<a-form-model layout="inline">-->
          <!--<a-form-model-item style="width: 180px">-->
          <!--<div class="valveClosingPlan" style="width: 165px; border: 1px solid #01853c; height: 300px">-->

          <!--</div>-->
          <!--</a-form-model-item>-->

          <!--<a-form-model-item style="width: calc(100% - 185px)">-->
          <!--<div >-->
          <!---->
          <!--</div>-->
          <!--</a-form-model-item>-->
          <!--</a-form-model>-->
        </div>
      </div>

      <!--火灾分析弹窗内容-->
      <div style="display: none;" id="fire-analysis-box">
        <a-form-model layout="inline">
          <a-form-model-item label="查找范围(米)">
            <a-input-number size="small" :min="0" :step="1"
                            v-model="fireAnalysis.distance"
                            @change="drawFirePointBuffer"
                            style="width: 80px;margin-right: 10px;"/>
          </a-form-model-item>
          <a-form-model-item>
            <a-button size="small" type="primary" icon="fullscreen-exit" @click="selectFirePoint">火灾选点</a-button>
          </a-form-model-item>
          <a-form-model-item>
            <a-button size="small" type="primary" icon="search"
                      style="margin: 0 10px;" @click="fireHydrantSearch">查询
            </a-button>
          </a-form-model-item>
          <a-form-model-item>
            <a-button size="small" type="primary" icon="export" @click="fireHydrantExport">导出</a-button>
          </a-form-model-item>

        </a-form-model>

        <div class="beauty-scroll" style="width: 100%;display: block; overflow-x: scroll;">
          <a-table size="small" bordered
                   :columns="fireAnalysis.table.columns"
                   :data-source="fireAnalysis.table.tableData"
                   :pagination="{ pageSize: 10 }"
                   :scroll="{ x: 1000, y: 400 }"
                   :customRow="fireAnalysisRowClick"></a-table>
        </div>
      </div>

      <!--预警分析弹窗内容-->
      <div style="display: none;" id="warning-analysis-box">
        <a-form-model layout="inline">
          <a-row :gutter="5">
            <a-col :span="8">
              <a-form-model-item label="预警对象">
                <a-select size="small" v-model="earlyWarningAnalysis.type">
                  <a-select-option value="POINT">管点</a-select-option>
                  <a-select-option value="LINE">管线</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>

            <a-col :span="8">
              <a-form-model-item label="预警年限">
                <a-input-number size="small" :min="0" :step="1" v-model="earlyWarningAnalysis.value"
                                style="width: 50px;"/>
              </a-form-model-item>
            </a-col>

            <a-col :span="8">
              <a-form-model-item>
                <a-button size="small" type="primary" icon="search" @click="earlyWarningAnalysising">查询</a-button>
              </a-form-model-item>

              <a-form-model-item style="margin-left: 10px;">
                <a-button size="small" type="primary" icon="export" @click="earlyWarningAnalysisingExport">导出
                </a-button>
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-form-model-item style="display: block">
            <a-table size="small"
                     bordered
                     :columns="earlyWarningAnalysis.table.columns"
                     :data-source="earlyWarningAnalysis.table.tableData"
                     :pagination="{ pageSize: 10 }"
                     :scroll="{ y: 400 }"
                     :customRow="pipeLineSearchRowClick"></a-table>
          </a-form-model-item>
        </a-form-model>
      </div>

      <!--连通性分析弹窗内容-->
      <div style="display: none;" id="connectivity-analysis-box">
        <div>
          <a-button size="small" type="primary" @click="selectLinkStartPoint">
            <a-icon type="left"/>
            起点选样
          </a-button>
          <a-button size="small" type="primary" style="margin: 0 20px;"
                    @click="selectLinkEndPoint">
            终点选样
            <a-icon type="right"/>
          </a-button>
          <a-button size="small" type="primary"
                    :disabled="linkAnalysis.startPoint == null || linkAnalysis.endPoint == null"
                    @click="linkedAnalysis">
            <a-icon type="flag"/>
            开始分析
          </a-button>
        </div>

        <div style="margin: 10px 0;">
          <a-form-model layout="inline" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
            <a-form-model-item label="起点">
              <a-input-group size="small" compact>
                <a-input style="width: 50%" :readOnly="true"
                         :value="getLinkPointValue(linkAnalysis.startPoint, 'x')"/>
                <a-input style="width: 50%" :readOnly="true"
                         :value="getLinkPointValue(linkAnalysis.startPoint, 'y')"/>
              </a-input-group>
            </a-form-model-item>

            <a-form-model-item label="终点">
              <a-input-group size="small" compact>
                <a-input style="width: 50%" :readOnly="true"
                         :value="getLinkPointValue(linkAnalysis.endPoint,'x')"/>
                <a-input style="width: 50%" :readOnly="true"
                         :value="getLinkPointValue(linkAnalysis.endPoint,'y')"/>
              </a-input-group>
            </a-form-model-item>

          </a-form-model>
        </div>

        <div v-if="linkAnalysis.isLinked != undefined">
          <p class="connectivity-result">起点和终点连通性分析结果：</p>
          <div style="height: 240px; background-repeat: no-repeat; background-size: auto; margin-left: 75px"
               :style="{ backgroundImage: 'url(' + require('@/assets/map-svg/isLinked.png') + ')' }">
            <div style="font-size: 20px;color: red;font-weight: 700;
                  margin-top: 90px;margin-left: 75px;position: absolute;transform: rotate(-15deg);">
              {{ linkAnalysis.isLinked ? '连通' : '不连通' }}
            </div>
          </div>
        </div>
      </div>

      <!--高程差分析弹窗内容-->
      <div style="display: none;" id="height-difference-analysis-box">
        <div>
          <a-button size="small" type="primary" @click="selectAltitudeStartPoint">
            <a-icon type="left"/>
            起点选样
          </a-button>
          <a-button size="small" type="primary" style="margin: 0 20px;"
                    @click="selectAltitudeEndPoint">
            终点选样
            <a-icon type="right"/>
          </a-button>
          <a-button size="small" type="primary"
                    :disabled="altitudeAnalysis.startPoint == null || altitudeAnalysis.endPoint == null"
                    @click="altitudeAnalysising">
            <a-icon type="flag"/>
            开始分析
          </a-button>
        </div>

        <div style="margin: 10px 0;">
          <a-form-model layout="inline" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
            <a-form-model-item label="起点">
              <a-input-group size="small" compact>
                <a-input style="width: 50%" :readOnly="true"
                         :value="getLinkPointValue(altitudeAnalysis.startPoint, 'x')"/>
                <a-input style="width: 50%" :readOnly="true"
                         :value="getLinkPointValue(altitudeAnalysis.startPoint, 'y')"/>
              </a-input-group>
            </a-form-model-item>

            <a-form-model-item label="终点">
              <a-input-group size="small" compact>
                <a-input style="width: 50%" :readOnly="true"
                         :value="getLinkPointValue(altitudeAnalysis.endPoint, 'x')"/>
                <a-input style="width: 50%" :readOnly="true"
                         :value="getLinkPointValue(altitudeAnalysis.endPoint, 'y')"/>
              </a-input-group>
            </a-form-model-item>

          </a-form-model>
        </div>

        <div v-show="altitudeAnalysis.heightDifference != undefined">
          <div style="width: 100%;">
            <a-descriptions size="small" :column="2" bordered layout="vertical">
              <a-descriptions-item label="起点名称" style="background-color: green;">
                {{ this.altitudeAnalysis.sPoint.name }}
              </a-descriptions-item>

              <a-descriptions-item label="终点名称">
                {{ this.altitudeAnalysis.ePoint.name }}
              </a-descriptions-item>

              <a-descriptions-item label="起点位置">
                {{ this.altitudeAnalysis.sPoint.address }}
              </a-descriptions-item>

              <a-descriptions-item label="终点位置">
                {{ this.altitudeAnalysis.ePoint.address }}
              </a-descriptions-item>

              <a-descriptions-item label="起点高程">
                {{ this.altitudeAnalysis.sPoint.h }}
              </a-descriptions-item>

              <a-descriptions-item label="终点高程">
                {{ this.altitudeAnalysis.ePoint.h }}
              </a-descriptions-item>
            </a-descriptions>

            <div style="margin-top: 10px;">
              <p class="connectivity-result">起点和终点高程差：{{ this.altitudeAnalysis.heightDifference || 0 }}</p>
              <div style="border: 1px solid #e8e8e8; text-align: center">
                <canvas id="altitudeCanvas" style="width: 100%;height: 200px;" ref="altitudeCanvas"></canvas>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--道路缓冲查询弹窗内容-->
      <div style="display: none;" id="road-buffer-analysis-box">
        <a-form-model layout="inline">
          <a-form-model-item label="道路图层名称">
            <a-select size="small" style="width: 130px;margin-right: 5px;"
                      v-model="roadBuffer.layerId"
                      placeholder="选择道路图层"
                      @change="onStatisticsLayerChange">
              <a-select-option v-for="(option, index) in roadBuffer.layerData"
                               v-bind:value="option.id"
                               v-bind:key="index">{{ option.layerName }}
              </a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item label="道路名称">
            <a-select size="small" show-search
                      style="width: 130px;" placeholder="搜索道路"
                      v-model="roadBuffer.roadId"
                      :default-active-first-option="false"
                      :show-arrow="false"
                      :filter-option="false"
                      :not-found-content="null"
                      @search="onStatisticsRoadSearch"
                      @change="onStatisticsRoadChange">
              <a-select-option v-for="(option, index) in roadBuffer.roadData"
                               v-bind:value="option.id"
                               v-bind:key="index"
                               v-bind:optVal="option">{{ option.idName }}
              </a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item label="查询要素">
            <a-select size="small" style="width: 65px;margin-right: 5px;"
                      v-model="roadBuffer.type">
              <a-select-option value="POINT">管点</a-select-option>
              <a-select-option value="LINE">管线</a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item label="缓冲距离(米)">
            <a-input-number size="small"
                            :min="1" :step="1"
                            v-model="roadBuffer.distance"
                            @change="onStatisticsDistanceChange"
                            style="width: 65px;"/>
          </a-form-model-item>


          <a-form-model-item>
            <a-button size="small" type="primary" icon="search"
                      style="margin: 0 5px;"
                      @click="roadBufferSearch">查询
            </a-button>
          </a-form-model-item>

          <a-form-model-item>
            <a-button size="small" type="primary" icon="export" @click="roadBufferExport">导出</a-button>
          </a-form-model-item>

          <a-form-model-item style="display: block">
            <a-table size="small" bordered
                     :columns="roadBuffer.table.columns"
                     :data-source="roadBuffer.table.tableData"
                     :pagination="{ pageSize: 10 }"
                     :scroll="{ y: 400 }"
                     :customRow="roadBufferRowClick">
            </a-table>
          </a-form-model-item>
        </a-form-model>
      </div>

      <!--管线要素查询弹窗内容-->
      <div style="display: none;" id="pipe-features-analysis-box">
        <a-form-model layout="inline">
          <a-form-model-item label="查询要素">
            <a-select size="small" style="width: 100px;margin-right: 5px;" v-model="pipeLineSearch.type">
              <a-select-option value="POINT">管点</a-select-option>
              <a-select-option value="LINE">管线</a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item label="字段名称">
            <a-select size="small" style="width: 120px;" v-model="pipeLineSearch.field" placeholder="选择查询字段">
              <a-select-option v-for="(option, index) in pipeLineSearch.fieldData"
                               v-bind:value="option.field"
                               v-bind:key="index">{{ option.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item label="运算符">
            <a-select size="small" style="width: 100px;margin-right: 5px;" v-model="pipeLineSearch.operator">
              <a-select-option v-for="(option, index) in pipeLineSearch.operatorData"
                               v-bind:value="option.id"
                               v-bind:key="index">{{ option.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item label="运算值">
            <a-input size="small" v-model="pipeLineSearch.value" style="width: 80px;"/>
          </a-form-model-item>

          <a-form-model-item>
            <a-button size="small" type="primary" icon="search"
                      style="margin: 0 5px;"
                      @click="pipeLineSearchSearch">查询
            </a-button>
          </a-form-model-item>

          <a-form-model-item>
            <a-button size="small" type="primary" icon="export"
                      @click="pipeLineSearchExport">导出
            </a-button>
          </a-form-model-item>

          <a-form-model-item style="display: block">
            <a-table rowKey="id" size="small" bordered
                     :columns="pipeLineSearch.table.columns"
                     :data-source="pipeLineSearch.table.tableData"
                     :pagination="{ pageSize: 10 }"
                     :scroll="{ y: 400 }"
                     :customRow="pipeLineSearchRowClick"></a-table>
          </a-form-model-item>
        </a-form-model>
      </div>

      <!--管线长度查询弹窗内容-->
      <div style="display: none;" id="pipe-length-analysis-box">
        <a-row :gutter="10">
          <a-col :span="6">
            <a-row>
              <div style="height: 120px;overflow: auto;">
                <a-checkbox :indeterminate="pipeLineLength.pipeMaterial.indeterminate"
                            :checked="pipeLineLength.pipeMaterial.checkAll"
                            @change="onCheckAllChangePipeMaterial">材质
                </a-checkbox>
                <a-divider style="margin: 5px 0 !important;"/>
                <a-checkbox-group v-model="pipeLineLength.pipeMaterial.checkedList"
                                  :options="pipeLineLength.pipeMaterial.plainOptions"
                                  @change="onChangePipeMaterial"/>
              </div>
            </a-row>

            <a-divider style="margin: 12px 0 !important;"/>

            <a-row>
              <div>
                <a-checkbox :indeterminate="pipeLineLength.pipeDiameter.indeterminate"
                            :checked="pipeLineLength.pipeDiameter.checkAll"
                            @change="onCheckAllChangePipeDiameter">口径
                </a-checkbox>
                <a-divider style="margin: 5px 0 !important;"/>
                <div class="beauty-scroll" style="height: 180px;overflow: auto;">
                  <a-checkbox-group v-model="pipeLineLength.pipeDiameter.checkedList"
                                    :options="pipeLineLength.pipeDiameter.plainOptions"
                                    @change="onChangePipeDiameter"/>
                </div>
              </div>
            </a-row>

            <a-divider style="margin: 12px 0 !important;"/>

            <a-row>
              <div style="text-align: center;">
                <a-button size="small" type="primary" icon="search"
                          @click="pipeLineLengthSearch">
                  查询
                </a-button>
              </div>
            </a-row>
          </a-col>

          <a-col :span="18">
            <span style="margin-right: 20px">管线长度合计：{{ pipeLineLength.table.totalLength }}m</span>
            <span>
              <a-button size="small" type="primary" icon="export" @click="pipeLineLengthExport">导出</a-button>
            </span>
            <a-table rowKey="id" size="small"
                     bordered style="margin-top: 10px"
                     :columns="pipeLineLength.table.columns"
                     :data-source="pipeLineLength.table.tableData"
                     :pagination="{ pageSize: 10 }"
                     :scroll="{ y: 400 }"></a-table>
          </a-col>
        </a-row>
      </div>

      <!--设施数量弹窗内容-->
      <div style="display: none;" id="facilities-analysis-box">
        <a-row :gutter="10">
          <a-col :span="7">
            <div class="devicesType">
              <a-checkbox size="small" :indeterminate="devicesCount.devicesType.indeterminate"
                          :checked="devicesCount.devicesType.checkAll"
                          @change="onCheckAllChangeDevicesCount">设施类型
              </a-checkbox>

              <a-divider style="margin: 5px 0 !important;"/>

              <a-checkbox-group size="small" v-model="devicesCount.devicesType.checkedList"
                                :options="devicesCount.devicesType.plainOptions"
                                @change="onChangeDevicesCount"/>
            </div>

            <div style="text-align: center;margin-top: 10px;">
              <a-button size="small" type="primary" icon="search"
                        @click="devicesCountSearch">
                查询
              </a-button>
            </div>
          </a-col>

          <a-col :span="17">
            <span style="margin-right: 20px">设施数量合计：{{ devicesCount.table.totalNum }}个</span>
            <span>
              <a-button size="small" type="primary" icon="export" @click="devicesCountExport">导出</a-button>
            </span>
            <a-table rowKey="scode" size="small"
                     bordered style="margin-top: 10px"
                     :columns="devicesCount.table.columns"
                     :data-source="devicesCount.table.tableData"
                     :pagination="{ pageSize: 10 }"
                     :scroll="{ y: 400 }"></a-table>
          </a-col>
        </a-row>
      </div>
    </MapPopup>
  </div>
</template>

<script>
import OlMapN from '@/components/olMap/OlMapN'
import * as turf from '@turf/turf'
import {buffer} from '@/utils/mapfunction/spatialAnalysis'
import ExportExcel from '@/utils/excel/excel'
import MapPopup from './components/MapPopup'

import {
  getDictItems,
  getLayerList,
  getFeaturesByLayerId,
  getPointsOrLinesDetail,
  findPointsOrLines,
  getPipelineLength,
  getPointFeatureCount,
  getPointsOrLinesWarningPeriod,
} from '@/api/leakage/gisdata'

const getParentKey = (key, tree) => {
  let parentKey
  for (let i = 0; i < tree.length; i++) {
    let node = tree[i]
    if (node.children) {
      if (node.children.some((item) => item.key === key)) {
        parentKey = node.key
      } else if (getParentKey(key, node.children)) {
        parentKey = getParentKey(key, node.children)
      }
    }
  }
  return parentKey
}

export default {
  name: 'PipeNetworkAnalysis',
  components: {
    OlMapN,
    MapPopup
  },
  computed: {},
  data() {
    return {
      minHeight: window.innerHeight - 245,
      //设备类型imgUrlMap
      device_type_imgUrlMap: {},
      //当前选中要素
      selectedFeature: {},
      //当前操作状态
      operatedStatusTFlag: 'false',
      operatedStatusText: '浏览',
      //图层集
      layerOptions: [],
      //地图底图
      baseMapData: {},
      //传到地图里面的要素集
      featuresData: [],
      //图层id，名字映射表
      layerNameMap: {},
      //右边窗口的标题
      popTitle: '',
      // 顶部菜单栏
      menuList: [
        {key: 1, title: '图层', funcName: 'layerControl'},
        {key: 2, title: '坐标定位', funcName: 'localToXYOpen'},
        {key: 3, title: '交叉路口定位', funcName: 'localToRoadXYOpen'},
        {key: 5, title: '关阀预案', funcName: 'valveClosingPlanAnalysisOpen'},
        {key: 6, title: '火灾分析', funcName: 'fireHydrantSearchOpen'},
        {key: 7, title: '预警分析', funcName: 'earlyWarningAnalysisingOpen'},
        {key: 8, title: '连通性分析', funcName: 'linkedAnalysisOpen'},
        {key: 9, title: '高程差分析', funcName: 'altitudeAnalysisingOpen'},
        {key: 10, title: '道路缓冲查询', funcName: 'roadBufferSearchOpen'},
        {key: 11, title: '管线要素查询', funcName: 'pipeLineSearchSearchOpen'},
        {key: 12, title: '管线长度查询', funcName: 'pipeLineLengthSearchOpen'},
        {key: 13, title: '设施数量查询', funcName: 'devicesCountSearchOpen'}
      ],
      // 菜单栏选中
      isActive: -1,
      popContainnerShowMap: {
        layerControl: false,
        showLayerTable: false,
        showDetail: false,
        related: false,
        style: false,
      },
      //图层控制开始
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      selectedKeys: [],
      disabledKey: null,
      treeData: [],
      //图层控制结束
      //经纬度定位
      coordinateXY: {locationX: undefined, locationY: undefined,},
      //交叉路口定位
      roadXY: {
        layerData: [],
        layerId: '',
        roadData1: [],
        road1: '',
        road1Opt: null,
        roadData2: [],
        road2: '',
        road2Opt: null,
      },
      //模糊定位
      searchVague: {
        columns: [
          {title: '编号', dataIndex: 'id', width: '30%',},
          {title: '名称', dataIndex: 'name', width: '70%',},
        ],
        tableData: [
          {key: 0, id: 3, name: `私立中学`,},
          {key: 1, id: 4, name: `楚米中学`,},
          {key: 2, id: 5, name: `私立学校`,},
          {key: 3, id: 6, name: `私立学校`,},
          {key: 4, id: 7, name: `私立学校`,},
        ],
      },
      //关阀预案开始
      valveClosingPlan: {
        flag: false,
        selectFeature: null,
        markedFeature: null,
        valveClosingPlanResultMap: {},
        plainOptions: [],
        checkedList: [],
        indeterminate: false,
        checkAll: false,
        table: {
          columns: [
            {title: '点号', dataIndex: 'expNo',},
            {title: '级别', dataIndex: 'level',},
            {title: '设施名称', dataIndex: 'feature',},
            {title: '开关状态', dataIndex: 'onoff',},
            {title: '位置', dataIndex: 'address',},
            {title: '材质', dataIndex: 'meterial',},
            {title: '规格', dataIndex: 'spec',},
            {title: '埋深', dataIndex: 'deep',},
            {title: '建设年代', dataIndex: 'mdate',},
          ],
          tableData: [],
        },
      },
      //关阀预案结束
      //火灾分析开始
      fireAnalysis: {
        point: null,
        fbuffered: null,
        bufferedRes: [],
        flag: false,
        distance: 100,
        table: {
          columns: [
            {title: '点号', dataIndex: 'expNo',},
            {title: '设施类别', dataIndex: 'typeName',},
            {title: '设施名称', dataIndex: 'name',},
            {title: '开关状态', dataIndex: 'onoff',},
            {title: '位置', dataIndex: 'address',},
            {title: '材质', dataIndex: 'meterial',},
            {title: '规格', dataIndex: 'spec',},
            {title: '埋深', dataIndex: 'deep',},
            {title: '建设年代', dataIndex: 'mdate',},
          ],
          tableData: [],
        },
      },
      //火灾分析结束
      //预警分析开始
      earlyWarningAnalysis: {
        type: 'LINE',
        yearLimit: 'year',
        value: 5,
        table: {
          columns: [
            {title: '点号', dataIndex: 'expNo',},
            {title: '地址', dataIndex: 'address',},
            {title: '工程号', dataIndex: 'pId',},
          ],
          tableData: [],
        },
      },
      //预警分析结束
      //连通性分析开始
      linkAnalysis: {
        isLinked: undefined,
        startFlag: false,
        startPoint: null,
        endFlag: false,
        endPoint: null,
      },
      //连通性分析结束
      //高程差分析开始
      altitudeAnalysis: {
        startFlag: false,
        startPoint: null,
        sPoint: {name: '', h: '', address: '',},
        endFlag: false,
        endPoint: null,
        ePoint: {name: '', h: '', address: '',},
        canvas: {},
        heightDifference: undefined
      },
      //高程差分析结束
      //查询统计开始
      //道路缓冲查询
      roadBuffer: {
        layerData: [],
        layerId: '',
        roadData: [],
        roadId: '',
        roadOpt: null,
        distance: '10',
        type: 'POINT',
        fbuffered: null,
        bufferedRes: [],
        table: {
          localType: '',
          columns: [
            {title: '点号', dataIndex: 'expNo',},
            {title: '地址', dataIndex: 'address',},
            {title: '工程号', dataIndex: 'pId',},
          ],
          tableData: [],
        },
      },
      //管线要素查询
      pipeLineSearch: {
        value: '',
        type: 'LINE',
        lineField: 'dS',
        lineFieldData: [
          {field: 'dS', name: '管径',},
          {field: 'lineLength', name: '管线长度',},
          {field: 'sDeep', name: '起点埋深',},
          {field: 'eDeep', name: '终点埋深',},
        ],
        pointField: 'dS',
        pointFieldData: [
          {field: 'scode', name: '设施类别',},
          {field: 'meterial', name: '材质',},
          {field: 'spec', name: '规格',},
          {field: 'deep', name: '埋深',},
        ],
        operator: 'EQ',
        operatorData: [
          {id: 'LIKE', name: '模糊查询',},
          {id: 'GT', name: '大于',},
          {id: 'GE', name: '大于等于',},
          {id: 'LT', name: '小于',},
          {id: 'LE', name: '小于等于',},
          {id: 'EQ', name: '等于',},
          {id: 'NE', name: '不等于',},
        ],
        table: {
          localType: '',
          columns: [
            {title: '点号', dataIndex: 'expNo',},
            {title: '地址', dataIndex: 'address',},
            {title: '工程号', dataIndex: 'pId',},
          ],
          tableData: [],
        },
      },
      //管线长度查询开始
      pipeLineLength: {
        tree: {
          selectedKey: '',
          expandedKeys: ['000'],
          searchValue: '',
          autoExpandParent: true,
          dataList: [],
          gData: [],
        },
        pipeMaterial: {
          map: {},
          plainOptions: [],
          checkedList: [],
          indeterminate: false,
          checkAll: false,
        },
        pipeDiameter: {
          plainOptions: [],
          checkedList: [],
          indeterminate: false,
          checkAll: false,
        },
        exportType: 'report',
        table: {
          totalLength: 0,
          columns: [
            {title: '材质', dataIndex: 'material',},
            {title: '管经', dataIndex: 'dn',},
            {title: '长度(M)', dataIndex: 'length',},
          ],
          tableData: [],
        },
      },
      //管线长度查询结束
      //设施数量查询开始
      devicesCount: {
        tree: {
          selectedKey: '',
          expandedKeys: ['000'],
          searchValue: '',
          autoExpandParent: true,
          dataList: [],
          gData: [],
        },
        devicesType: {
          map: {},
          plainOptions: [],
          checkedList: [],
          indeterminate: false,
          checkAll: false,
        },
        exportType: 'report',
        table: {
          totalNum: 0,
          columns: [
            {title: '设施类别', dataIndex: 'scode',},
            {title: '个数', dataIndex: 'count',},
          ],
          tableData: [],
        },
      },
      //设施数量查询结束
    }
  },
  async mounted() {
    let meskey = 'mapmes'
    this.$message.loading({content: '地图数据加载中...', meskey})
    ////管道材质
    this.dataLoader(
        getDictItems,
        'pipe_material',
        function (res) {
          let pipe_material = res.result
          if (pipe_material != null) {
            pipe_material.forEach((element) => {
              element.label = element.title
              this.pipeLineLength.pipeMaterial.map[element.value] = element.title
            })
          }
          this.pipeLineLength.pipeMaterial.plainOptions = pipe_material
          //管道口径
          this.dataLoader(
              getDictItems,
              'pipe_diameter',
              function (res) {
                let pipe_diameter = res.result
                if (pipe_diameter != null) {
                  pipe_diameter.forEach((element) => {
                    element.label = element.title
                  })
                }
                this.pipeLineLength.pipeDiameter.plainOptions = pipe_diameter
                //设备类型
                this.dataLoader(
                    getDictItems,
                    'device_type',
                    function (res) {
                      let device_type = res.result
                      let imgUrlMap = {}
                      if (device_type != null) {
                        for (let i = 0; i < device_type.length; i++) {
                          imgUrlMap[device_type[i].value] = device_type[i].description
                          device_type[i].label = device_type[i].title
                          this.devicesCount.devicesType.map[device_type[i].value] = device_type[i].title
                        }
                      }

                      this.device_type_imgUrlMap = imgUrlMap
                      this.devicesCount.devicesType.plainOptions = device_type
                      //获取图层列表
                      this.dataLoader(
                          getLayerList,
                          function (res) {
                            let wfsUrls = []
                            let layerIdArr = []
                            this.layerOptions = res.result.records
                            this.layerOptions.forEach((element) => {
                              if (element.category == 'BASE') {
                                this.baseMapData = element
                              }
                              if (element.category == 'NET') {
                                this.selectedLayerId = element.id
                              }
                              if (element.category == 'ETC' && element.url) {
                                wfsUrls.push({
                                  id: element.id,
                                  url: element.url,
                                  layers: element.layers,
                                  layerName: element.layerName,
                                })
                              }
                              element.key = element.id
                              element.title = element.layerName
                              this.layerNameMap[element.id] = element.layerName
                              layerIdArr.push(element.id)
                            })
                            this.layerIdArr = layerIdArr
                            let that = this
                            //获取所有图层的所有要素
                            this.getFeaturesByLayerIds(this.layerIdArr, undefined, () => {
                              for (let wfsKey = 0; wfsKey < wfsUrls.length; wfsKey++) {
                                this.$refs.olMapN.getFeaturesByWFSUrl(
                                    wfsUrls[wfsKey].url,
                                    wfsUrls[wfsKey].layers,
                                    wfsUrls[wfsKey].id,
                                    wfsUrls[wfsKey].layerName,
                                    (res) => {
                                      that.$message.success({content: '地图数据加载完成', meskey, duration: 2})
                                      that.rtFeaturesData = that.rtFeaturesData.concat([res])
                                    }
                                )
                              }
                            })
                          }.bind(this)
                      )
                    }.bind(this)
                )
              }.bind(this)
          )
        }.bind(this)
    )
  },
  methods: {
    // 判断函数名
    handle_function_call(function_name, key) {
      this.isActive = key
      this[function_name]()
    },
    //数据加载器
    async dataLoader() {
      let argsArr = []
      for (let i = 0; i < arguments.length; i++) {
        argsArr.push(arguments[i])
      }
      if (typeof argsArr[0] != 'function' || typeof argsArr[argsArr.length - 1] != 'function') {
        return
      }
      let paramStr = ''
      for (let j = 0; j < argsArr.length; j++) {
        if (j != 0 && j != argsArr.length - 1) {
          paramStr += '"' + argsArr[j] + '",'
        }
      }
      paramStr = paramStr.substring(0, paramStr.length - 1)
      await eval('argsArr[0](' + paramStr + ')').then((res) => {
        argsArr[argsArr.length - 1](res)
      })
    },
    //获取图层列表
    getLayerList(callback) {
      this.dataLoader(
          getLayerList,
          function (res) {
            let layerIdArr = []
            this.layerOptions = res.result.records
            this.layerOptions.forEach((element) => {
              element.key = element.id
              element.title = element.layerName
              this.layerNameMap[element.id] = element.layerName
              layerIdArr.push(element.id)
            })
            this.layerIdArr = layerIdArr
            if (callback) {
              callback()
            }
          }.bind(this)
      )
    },
    //获取图层对应的要素列表
    getFeaturesByLayerIds(ids, type, callback) {
      this.dataLoader(
          getFeaturesByLayerId,
          ids,
          function (res) {
            let result = res.result
            for (let i = 0; i < result.length; i++) {
              let layerId = result[i].layerId
              let layerName = this.layerNameMap[layerId]
              let features = result[i].features
              for (let j = 0; j < features.length; j++) {
                features[j].layerId = layerId
                features[j].layerName = layerName
                // features[j].idName = features[j].id+(features[j].name===null?"":'/'+features[j].name);
                features[j].idName = features[j].name === null ? features[j].id : features[j].name
                features[j].key = features[j].id
              }
            }
            this.rtFeaturesData = result
            let resData = (this.tableData = this.featuresData = this.getFeatureDataByLayerId(this.selectedLayerId))
            if (callback) {
              callback(resData)
            }
          }.bind(this)
      )
    },
    //根据图层id从缓存中获取对应的要素
    getFeatureDataByLayerId(layerId) {
      let result = this.rtFeaturesData
      let featuresData = []
      if (result) {
        for (let i = 0; i < result.length; i++) {
          let layerIdd = result[i].layerId
          let features = result[i].features
          for (let j = 0; j < features.length; j++) {
            if (layerIdd === layerId) {
              featuresData.push(features[j])
            }
          }
        }
      }
      return featuresData
    },
    //根据图层id从缓存中获取对应的要素
    getLineFeatureDataByLayerId(layerId) {
      let result = this.rtFeaturesData
      let featuresData = []
      if (result) {
        for (let i = 0; i < result.length; i++) {
          let layerIdd = result[i].layerId
          let features = result[i].features
          for (let j = 0; j < features.length; j++) {
            if (layerIdd === layerId && features[j].typeKey === 'LINE') {
              featuresData.push(features[j])
            }
          }
        }
      }
      return featuresData
    },
    getFeatureDataByLayerIdName(layerId, name) {
      let data = this.getFeatureDataByLayerId(layerId)
      let featuresData = []
      data.forEach((element) => {
        if (element.name && element.name.indexOf(name) > -1) {
          featuresData.push(element)
        }
      })
      return featuresData
    },
    //传入id的集合，返回详细的数据的集合
    async getPointsOrLinesDetail(param, callback) {
      await getPointsOrLinesDetail(param).then((res) => {
        if (callback) {
          callback(res.result)
        }
      })
    },
    //管点或管线组合查询
    async findPointsOrLines(param, callback) {
      await findPointsOrLines(param).then((res) => {
        if (callback) {
          callback(res.result)
        }
      })
    },
    //查询符合条件的管线，统计长度，并生成报表
    async getPipelineLength(param, callback) {
      await getPipelineLength(param).then((res) => {
        if (callback) {
          callback(res.result)
        }
      })
    },
    //查询符合条件的管线，统计长度，并生成报表
    async getPointFeatureCount(param, callback) {
      await getPointFeatureCount(param).then((res) => {
        if (callback) {
          callback(res.result)
        }
      })
    },
    //管点或管线预警分析
    async getPointsOrLinesWarningPeriod(param, callback) {
      await getPointsOrLinesWarningPeriod(param).then((res) => {
        if (callback) {
          callback(res.result)
        }
      })
    },
    //打开属性面板
    openPop(title) {
      this.closePop()
      this.popTitle = title
      let mapDiv = document.getElementById('mapContainer')
      mapDiv.style.height = '50vh'
      let popDiv = document.getElementById('mapPopContainner')
      popDiv.style.height = '33vh'
      popDiv.style.width = '100%'
      popDiv.style.float = 'left'
      popDiv.style.display = 'block'
      this.$refs.olMapN.resizeMap()
    },
    //打开右边属性面板
    openPopRight(title) {
      this.closePop()
      this.popTitle = title
      let mapDiv = document.getElementById('mapContainer')
      mapDiv.style.width = '72%'
      mapDiv.style.height = '100vh'
      let popDiv = document.getElementById('mapPopContainner')
      popDiv.style.width = '28%'
      popDiv.style.height = '100vh'
      popDiv.style.float = 'left'
      popDiv.style.display = 'block'
      this.$refs.olMapN.resizeMap()
    },
    //关闭属性面板
    closePop() {
      this.$refs.olMapN.drawCancel()
      let mapDiv = document.getElementById('mapContainer')
      mapDiv.style.height = '100vh'
      mapDiv.style.width = '100%'
      let popDiv = document.getElementById('mapPopContainner')
      popDiv.style.height = '0'
      popDiv.style.width = '0%'
      popDiv.style.float = 'unsset'
      popDiv.style.display = 'none'
      this.$refs.olMapN.resizeMap()
    },
    //图层控制开始
    layerControl() {
      for (let key in this.popContainnerShowMap) {
        this.popContainnerShowMap[key] = false
      }
      this.popContainnerShowMap.layerControl = true
      // this.openPopRight('图层')
      this.showMapPopupWindow('block', '选择图层', 'map-layer-box')

      let checkedKeysStr = JSON.stringify(this.checkedKeys)
      let valStr = JSON.stringify(this.layerOptions)
      //处理图层控制数据
      let layerControlData = JSON.parse(valStr)
      this.disabledKey = this.selectedLayerId
      this.expandedKeys = ['0-0-0']
      this.checkedKeys = JSON.parse(checkedKeysStr).concat([this.selectedLayerId])
      layerControlData.forEach((element) => {
        if (element.key === this.disabledKey || element.category === 'BASE') {
          element.disabled = true
          this.checkedKeys = this.checkedKeys.concat([element.key])
        } else {
          element.disabled = false
        }
      })
      this.treeData = [
        {
          title: '所有图层',
          key: '0-0-0',
          children: layerControlData,
        },
      ]
    },
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onCheck(checkedKeys) {
      this.checkedKeys = checkedKeys
      let rtKeys = []
      checkedKeys.forEach((element) => {
        if (element != '0-0-0') {
          rtKeys.push(element)
        }
      })
      this.$refs.olMapN.removeHighlightFeature()
      this.layerControlSeletc(rtKeys)
    },
    onSelect(selectedKeys, info) {
      // console.log('onSelect', info);
      // this.selectedKeys = selectedKeys;
    },
    layerControlSeletc(ids) {
      let arr = []
      for (let i = 0; i < ids.length; i++) {
        let data = this.getFeatureDataByLayerId(ids[i])
        arr = arr.concat(data)
      }
      this.featuresData = arr
    },
    //图层控制结束
    showMapPopupWindow(icon, title, targetId, width = 256) {
      this.$refs.refMapPopup.showFull(icon, title, targetId, width)
    },
    onPopupWindowClose() {
      this.$refs.olMapN.drawCancel()
      this.selectedFeature = {}
    },
    //坐标定位
    localToXYOpen() {
      // this.openPopRight('坐标定位')
      const mapCenter = this.baseMapData.center.split(',')
      this.coordinateXY.locationX = mapCenter[0]
      this.coordinateXY.locationY = mapCenter[1]
      this.showMapPopupWindow('environment', '坐标定位', 'position-locator-box')
    },
    localToXY() {
      if (this.coordinateXY.locationX && this.coordinateXY.locationY) {
        this.$refs.olMapN.localToXY(this.coordinateXY.locationX, this.coordinateXY.locationY)
      } else {
        this.$message.info('请先输入X坐标和Y坐标')
      }
    },
    resetXY() {
      this.$refs.olMapN.resetXY()
      this.coordinateXY.locationX = ''
      this.coordinateXY.locationY = ''
    },
    //交叉路口定位
    localToRoadXYOpen() {
      // this.openPopRight('交叉路口定位')
      this.showMapPopupWindow('environment', '交叉路口定位', 'crossroad-locator-box')
      //路网id
      let roadId = ''
      let roadLayer = []
      this.layerOptions.forEach((element) => {
        // if (element.id === roadId) {
        roadLayer.push(element)
        // }
      })
      //处理地图定位数据
      this.roadXY.layerData = roadLayer
      this.roadXY.layerId = roadId
    },
    //交叉路口定位道路图层下拉
    onRoadXYSelectChange(roadId) {
      this.roadXY.layerId = roadId
      let roadData = this.getLineFeatureDataByLayerId(this.roadXY.layerId)
      if (roadData.length > 0) {
        this.roadXY.roadData = roadData
        this.roadXY.road1 = roadData[0].idName
        this.roadXY.road2 = roadData[1].idName
        this.roadXY.road1Opt = roadData[0]
        this.roadXY.road2Opt = roadData[1]
      }
    },
    onRoad1Search(value) {
      if (value != '') {
        let roadData = this.getFeatureDataByLayerIdName(this.roadXY.layerId, value)
        this.roadXY.roadData1 = roadData
      }
    },
    onRoad1Change(key, com) {
      this.roadXY.road1Opt = com.data.attrs.optVal
      let geoms = [[JSON.parse(this.roadXY.road1Opt.feature.geom)]]
      if (this.roadXY.road2Opt != null) {
        geoms.push([JSON.parse(this.roadXY.road2Opt.feature.geom)])
      }
      this.$refs.olMapN.highlightGeoms(JSON.parse(this.roadXY.road1Opt.feature.geom))
    },
    onRoad2Search(value) {
      if (value != '') {
        let roadData = this.getFeatureDataByLayerIdName(this.roadXY.layerId, value)
        this.roadXY.roadData2 = roadData
      }
    },
    onRoad2Change(key, com) {
      this.roadXY.road2Opt = com.data.attrs.optVal
      let geoms = [[JSON.parse(this.roadXY.road2Opt.feature.geom)]]
      if (this.roadXY.road1Opt != null) {
        geoms.push([JSON.parse(this.roadXY.road1Opt.feature.geom)])
      }
      this.$refs.olMapN.highlightGeoms(JSON.parse(this.roadXY.road2Opt.feature.geom))
    },
    //交叉路口定位到交叉点
    localToRoadXY() {
      if (this.roadXY.road1Opt == null || this.roadXY.road2Opt == null) {
        this.$message.info('请选择道路')
        return
      }
      this.$refs.olMapN.localToRoadXY(
          JSON.parse(this.roadXY.road1Opt.feature.geom),
          JSON.parse(this.roadXY.road2Opt.feature.geom)
      )
    },
    //模糊定位
    fuzzyQueryOpen() {
      this.openPopRight('模糊定位')
    },
    onSearch(value) {
    },
    //表格点击行触发方法
    localRowClick(record, index) {
      return {
        on: {
          click: () => {
            console.log('localRowClick,,,', record, index)
          },
        },
      }
    },
    //关阀预案
    valveClosingPlanAnalysisOpen() {
      // this.openPop('关阀预案')
      this.showMapPopupWindow('profile', '关阀预案', 'valve-close-analysis-box', 600)
    },
    //点选
    selectValveClosingPlanStart() {
      this.$refs.olMapN.selectValveClosingPlanStart()
    },
    //清除
    cleanSelectValveClosingPlanStart() {
      this.$refs.olMapN.cleanSelectValveClosingPlanStart()
    },
    //爆管分析
    valveClosingPlanAnalysis() {
      let valveClosingPlan = this.$refs.olMapN.valveClosingPlanAnalysis()
      if (valveClosingPlan) {
        this.valveClosingPlan = valveClosingPlan
      }
    },
    //表格点击行触发方法
    valveClosingPlanRowClick(record, index) {
      return {
        on: {
          click: () => {
            this.$refs.olMapN.valveClosingPlanRowClick(record, index)
          },
        },
      }
    },
    //阀门关闭方案选择
    onChangeValveClosingPlan(checkedList) {
      this.$refs.olMapN.onChangeValveClosingPlan(checkedList)
    },
    //阀门关闭方案全选
    onCheckAllChangeValveClosingPlan(e) {
      this.$refs.olMapN.onCheckAllChangeValveClosingPlan(e)
    },
    //导出
    valveClosingPlanExport() {
      if (this.valveClosingPlan.table.tableData.length > 0) {
        this.$refs.olMapN.valveClosingPlanExport(
            this.valveClosingPlan.table.columns,
            this.valveClosingPlan.table.tableData,
            '关阀阀门'
        )
      } else {
        this.$message.info('暂无数据')
      }
    },
    //火灾分析
    fireHydrantSearchOpen() {
      // this.openPop('火灾分析')
      this.showMapPopupWindow('fire', '火灾分析', 'fire-analysis-box', 460)
    },
    //火灾分析开始
    selectFirePoint() {
      this.$refs.olMapN.selectFirePoint()
    },
    drawFirePointBuffer() {
      this.$refs.olMapN.drawFirePointBuffer(this.fireAnalysis.distance)
    },
    fireHydrantSearch() {
      let res = this.$refs.olMapN.fireHydrantSearch()
      if (res) {
        this.fireAnalysis = res
      }
    },
    fireAnalysisRowClick(record, index) {
      return {
        on: {
          click: () => {
            this.$refs.olMapN.fireAnalysisRowClick(record, index)
          },
        },
      }
    },
    //导出
    fireHydrantExport() {
      if (this.fireAnalysis.table.tableData.length > 0) {
        this.$refs.olMapN.fireAnalysisExport(
            this.fireAnalysis.table.columns,
            this.fireAnalysis.table.tableData,
            '消防阀门'
        )
      } else {
        this.$message.info('暂无数据')
      }
    },
    //火灾分析结束
    //预警分析
    earlyWarningAnalysisingOpen() {
      // this.openPop('预警分析')
      this.showMapPopupWindow('alert', '预警分析', 'warning-analysis-box', 460)
    },
    //预警分析开始
    //预警分析
    earlyWarningAnalysising() {
      let param = {
        layer: this.selectedLayerId + '',
        type: this.earlyWarningAnalysis.type + '',
        period: this.earlyWarningAnalysis.value + '',
      }
      this.getPointsOrLinesWarningPeriod(param, (res) => {
        if (res) {
          this.earlyWarningAnalysis.table.tableData = res
        } else {
          this.$message.info('暂无符合条件的数据')
        }
      })
    },
    //导出
    earlyWarningAnalysisingExport() {
      if (this.earlyWarningAnalysis.table.tableData.length > 0) {
        this.$refs.olMapN.earlyWarningAnalysisingExport(
            this.earlyWarningAnalysis.table.columns,
            this.earlyWarningAnalysis.table.tableData,
            '预警分析'
        )
      } else {
        this.$message.info('暂无数据')
      }
    },
    // //管线要素查询表格定位
    // pipeLineSearchRowClick(record, index) {
    //   return {
    //     on: {
    //       click: () => this.$refs.olMapN.pipeLineSearchRowClick(record, index),
    //     },
    //   }
    // },
    //预警分析结束
    //连通性分析
    linkedAnalysisOpen() {
      // this.openPopRight('连通性分析')
      this.linkAnalysis = {
        isLinked: undefined,
        startFlag: false,
        startPoint: null,
        endFlag: false,
        endPoint: null,
      }
      this.showMapPopupWindow('link', '连通性分析', 'connectivity-analysis-box', 360)
    },
    //连通性分析开始
    selectLinkStartPoint() {
      this.$refs.olMapN.selectLinkStartPoint()
    },
    selectLinkEndPoint() {
      this.$refs.olMapN.selectLinkEndPoint()
    },
    linkedAnalysis() {
      if (this.linkAnalysis.startPoint == null) {
        this.$message.warn('请选择起点')
        return
      }
      if (this.linkAnalysis.endPoint == null) {
        this.$message.warn('请选择终点')
        return
      }
      this.$refs.olMapN.linkedAnalysis(
          function (isLinked) {
            this.linkAnalysis.isLinked = isLinked
          }.bind(this)
      )
    },
    getLinkPointValue(point, type) {
      if (point) {
        let arrPoint = JSON.parse(point.geom)
        if (type === 'x') {
          return arrPoint[0]
        } else {
          return arrPoint[1]
        }
      }
      return ''
    },
    setLinkStartPoint(val) {
      this.linkAnalysis.startPoint = val
    },
    setLinkEndPoint(val) {
      this.linkAnalysis.endPoint = val
    },
    //连通性分析结束
    //高程差分析
    altitudeAnalysisingOpen() {
      // this.openPop('高程差分析')
      this.altitudeAnalysis = {
        startFlag: false,
        startPoint: null,
        sPoint: {
          name: '',
          h: '',
          address: '',
        },
        endFlag: false,
        endPoint: null,
        ePoint: {
          name: '',
          h: '',
          address: '',
        },
        canvas: {},
        heightDifference: undefined
      }
      this.showMapPopupWindow('column-height', '高程差分析', 'height-difference-analysis-box', 360)
    },
    //高程差分析开始
    selectAltitudeStartPoint() {
      const that = this
      let callback = (data) => {
        that.altitudeAnalysis.startPoint = data
      }
      this.$refs.olMapN.selectAltitudeStartPoint(callback)
    },
    selectAltitudeEndPoint() {
      const that = this
      let callback = (data) => {
        that.altitudeAnalysis.endPoint = data
      }
      this.$refs.olMapN.selectAltitudeEndPoint(callback)
    },
    altitudeAnalysising() {
      this.altitudeAnalysis.startPoint = this.$refs.olMapN.getAltitudeStartPoint()
      this.altitudeAnalysis.endPoint = this.$refs.olMapN.getAltitudeEndPoint()
      if (this.altitudeAnalysis.startPoint == null) {
        this.$message.warn('请选择起点')
        return
      }
      if (this.altitudeAnalysis.endPoint == null) {
        this.$message.warn('请选择终点')
        return
      }
      let startPoint = {
        name: this.altitudeAnalysis.startPoint.name,
        h: this.altitudeAnalysis.startPoint.feature.h,
        address: this.altitudeAnalysis.startPoint.feature.address,
      }
      let endPoint = {
        name: this.altitudeAnalysis.endPoint.name,
        h: this.altitudeAnalysis.endPoint.feature.h,
        address: this.altitudeAnalysis.endPoint.feature.address,
      }
      this.altitudeAnalysis.sPoint = startPoint
      this.altitudeAnalysis.ePoint = endPoint
      let x1 = 100
      let ty1 = 30
      let tx2 = 30
      let ty3 = 140
      if (Number(endPoint.h) > Number(startPoint.h)) {
        x1 = x1 + 140
        ty1 = ty1 + 100
        tx2 = tx2 + 210
        ty3 = ty3 - 110
      }

      // let canvas = this.$refs.altitudeCanvas
      let canvas = document.getElementById('altitudeCanvas')
      let ctx = canvas.getContext('2d')
      ctx.clearRect(0, 0, 360, 200)

      ctx.beginPath()
      ctx.fillStyle = '#F9A520'
      ctx.moveTo(x1, 30) // 第一个点坐标
      ctx.lineTo(240, 135) // 顺时针，第二个点坐标
      ctx.lineTo(100, 135) // 顺时针，第三个点坐标
      ctx.fill() // connect and fill

      ctx.font = '12px bold 黑体'

      ctx.beginPath()
      ctx.fillStyle = '#000'
      ctx.fillText(startPoint.name + '，高程:' + (startPoint.h == null ? '未设置' : startPoint.h), 50, ty1)

      this.altitudeAnalysis.heightDifference = (Number(endPoint.h) > Number(startPoint.h) ? endPoint.h - startPoint.h : startPoint.h - endPoint.h);

      ctx.beginPath()
      ctx.fillStyle = '#000'
      ctx.fillText('高程差:' + this.altitudeAnalysis.heightDifference, tx2, 90)

      ctx.beginPath()
      ctx.fillStyle = '#000'
      ctx.fillText(endPoint.name + '，高程:' + (endPoint.h == null ? '未设置' : endPoint.h), 185, ty3)
    },
    //高程差分析结束
    //道路缓冲查询
    roadBufferSearchOpen() {
      // this.openPop('道路缓冲查询')
      this.showMapPopupWindow('pic-center', '道路缓冲查询', 'road-buffer-analysis-box', 460)
      //路网id
      let roadId = ''
      let roadLayer = []
      this.layerOptions.forEach((element) => {
        // if (element.id === roadId) {
        roadLayer.push(element)
        // }
      })
      //处理统计分析数据
      this.roadBuffer.layerData = roadLayer
      this.roadBuffer.layerId = roadId
      this.roadBuffer.roadData = []
      this.roadBuffer.roadId = ''
      this.roadBuffer.roadOpt = null
    },
    //道路缓冲查询下拉图层
    onStatisticsLayerChange(e) {
      this.$refs.olMapN.onStatisticsLayerChange(e)
    },
    onStatisticsRoadSearch(value) {
      if (value != '') {
        let roadData = this.getFeatureDataByLayerIdName(this.roadBuffer.layerId, value)
        this.roadBuffer.roadData = roadData
      }
    },
    //道路缓冲查询下拉道路
    onStatisticsRoadChange(key, com) {
      this.$refs.olMapN.onStatisticsRoadChange(key, com, this.roadBuffer.distance)
    },
    onStatisticsDistanceChange() {
      this.$refs.olMapN.onStatisticsDistanceChange(this.roadBuffer.distance)
    },
    //道路缓冲查询按钮
    roadBufferSearch() {
      let searchRes = this.$refs.olMapN.roadBufferSearch(this.roadBuffer.distance, this.roadBuffer.type)
      let param = searchRes[0]
      if (param) {
        this.getPointsOrLinesDetail(param, (res) => {
          let localMap = {
            POINT: 'Point',
            LINE: 'LineString',
          }
          this.roadBuffer.table.tableData = res
          this.roadBuffer.table.localType = localMap[this.roadBuffer.type]
        })
      } else {
        this.$message.info('暂无可用于查询的道路图层')
      }
    },
    //道路缓冲查询导出
    roadBufferExport() {
      if (this.roadBuffer.table.tableData.length > 0) {
        this.$refs.olMapN.roadBufferExport(this.roadBuffer.table.columns, this.roadBuffer.table.tableData, '道路缓冲要素')
      } else {
        this.$message.info('暂无数据')
      }
    },
    //道路缓冲查询表格定位
    roadBufferRowClick(record, index) {
      return {
        on: {
          click: function () {
            this.$refs.olMapN.roadBufferRowClick(record, index, this.roadBuffer.table.localType)
          }.bind(this),
        },
      }
    },
    //管线要素查询
    pipeLineSearchSearchOpen() {
      // this.openPop('管线要素查询')
      this.showMapPopupWindow('fork', '管线要素查询', 'pipe-features-analysis-box', 460)
    },
    //管线要素查询按钮
    pipeLineSearchSearch() {
      let param = {
        layers: this.selectedLayerId + '',
        type: this.pipeLineSearch.type,
        field: this.pipeLineSearch.field,
        operator: this.pipeLineSearch.operator,
        value: this.pipeLineSearch.value,
      }
      this.findPointsOrLines(param, (res) => {
        if (res === null) {
          this.$message.info('暂无符合条件的数据')
          return
        }

        let localMap = {
          POINT: 'Point',
          LINE: 'LineString',
        }
        this.pipeLineSearch.table.tableData = res
        this.pipeLineSearch.table.localType = localMap[this.pipeLineSearch.type]
      })
    },
    //管线要素查询导出
    pipeLineSearchExport() {
      if (this.pipeLineSearch.table.tableData.length > 0) {
        this.$refs.olMapN.pipeLineSearchExport(
            this.pipeLineSearch.table.columns,
            this.pipeLineSearch.table.tableData,
            '管线要素'
        )
      } else {
        this.$message.info('暂无数据')
      }
    },
    //管线要素查询表格定位
    pipeLineSearchRowClick(record, index) {
      return {
        on: {
          click: () => this.$refs.olMapN.pipeLineSearchRowClick(record, index, this.pipeLineSearch.table.localType),
        },
      }
    },
    //管线长度查询
    pipeLineLengthSearchOpen() {
      // this.openPop('管线长度查询')
      this.showMapPopupWindow('gateway', '管线长度查询', 'pipe-length-analysis-box', 460)
      let polygonArr = this.$refs.olMapN.getPolygonVectorFeatures()
      let treeData = this.listData2TreeData(polygonArr)
      this.pipeLineLength.tree.dataList = polygonArr
      this.pipeLineLength.tree.gData = treeData
    },
    //管线长度查询开始
    onPipeLineLengthTreeExpand(expandedKeys) {
      this.pipeLineLength.tree.expandedKeys = expandedKeys
      this.pipeLineLength.tree.autoExpandParent = false
    },
    //材质选择
    onChangePipeMaterial(checkedList) {
      this.pipeLineLength.pipeMaterial.indeterminate =
          !!checkedList.length &&
          this.pipeLineLength.pipeMaterial.checkedList.length < this.pipeLineLength.pipeMaterial.plainOptions.length
      this.pipeLineLength.pipeMaterial.checkAll =
          checkedList.length === this.pipeLineLength.pipeMaterial.plainOptions.length
    },
    //材质全选
    onCheckAllChangePipeMaterial(e) {
      let checkedList = []
      if (e.target.checked) {
        this.pipeLineLength.pipeMaterial.plainOptions.forEach((element) => {
          checkedList.push(element.value)
        })
      }
      Object.assign(this.pipeLineLength.pipeMaterial, {
        checkedList: checkedList,
        indeterminate: false,
        checkAll: e.target.checked,
      })
    },
    //口径选择
    onChangePipeDiameter(checkedList) {
      this.pipeLineLength.pipeDiameter.indeterminate =
          !!checkedList.length && checkedList.length < this.pipeLineLength.pipeDiameter.plainOptions.length
      this.pipeLineLength.pipeDiameter.checkAll =
          checkedList.length === this.pipeLineLength.pipeDiameter.plainOptions.length
    },
    //口径全选
    onCheckAllChangePipeDiameter(e) {
      let checkedList = []
      if (e.target.checked) {
        this.pipeLineLength.pipeDiameter.plainOptions.forEach((element) => {
          checkedList.push(element.value)
        })
      }
      Object.assign(this.pipeLineLength.pipeDiameter, {
        checkedList: checkedList,
        indeterminate: false,
        checkAll: e.target.checked,
      })
    },
    //点击搜索
    pipeLineLengthSearch() {
      this.pipeLineLength.table.totalLength = 0
      this.pipeLineLength.table.tableData = []
      let bufferIds = []
      let isBuffered = false
      if (this.pipeLineLength.tree.selectedKey != '000' && this.pipeLineLength.tree.selectedKey != '') {
        isBuffered = true
        let polygon = this.$refs.olMapN.getFeatureById(this.pipeLineLength.tree.selectedKey)
        let bufferArr = []
        let lineArr = this.$refs.olMapN.getLineVectorFeatures()
        lineArr.forEach((element) => {
          let geom = JSON.parse(element.geom)
          if (geom.length === 2) {
            bufferArr.push(element)
          }
        })
        let bufferRes = this.$refs.olMapN.buffer(bufferArr, polygon)
        bufferRes.forEach((element) => {
          bufferIds.push(element.id)
        })
      }
      if (bufferIds.length === 0 && isBuffered) {
        return
      }
      if (this.pipeLineLength.pipeMaterial.checkedList.length === 0) {
        this.$message.warn('至少勾选一项材质!')
        return
      }
      if (this.pipeLineLength.pipeDiameter.checkedList.length === 0) {
        this.$message.warn('至少勾选一项口径!')
        return
      }
      let param = {
        lineIds: bufferIds.join(','),
        material: this.pipeLineLength.pipeMaterial.checkedList.join(','),
        dn: this.pipeLineLength.pipeDiameter.checkedList.join(','),
      }
      this.getPipelineLength(
          param,
          function (res) {
            if (res === null) {
              this.$message.info('暂无符合条件的数据')
              return
            }
            res.forEach((element) => {
              element.material = this.pipeLineLength.pipeMaterial.map[element.material]
              this.pipeLineLength.table.totalLength += Number(element.length)
            })
            this.pipeLineLength.table.tableData = res
          }.bind(this)
      )
    },
    //导出
    pipeLineLengthExport() {
      if (this.pipeLineLength.table.tableData.length > 0) {
        ExportExcel(this.pipeLineLength.table.columns, this.pipeLineLength.table.tableData, '管线长度')
      } else {
        this.$message.info('暂无数据')
      }
    },
    //管线长度查询结束

    //获取面的树形数据
    listData2TreeData(listData) {
      if (listData.length > 0) {
        for (let i = 0; i < listData.length; i++) {
          listData[i].key = listData[i].id
          listData[i].title = listData[i].idName
          listData[i].scopedSlots = {title: 'title'}
        }
        let treeData = [
          {
            title: '全部区域',
            key: '000',
            children: listData,
          },
        ]
        return treeData
      }
      return []
    },
    //设施数量查询
    devicesCountSearchOpen() {
      // this.openPop('设施数量查询')
      this.showMapPopupWindow('gold', '设施数量查询', 'facilities-analysis-box', 460)
      let polygonArr = this.$refs.olMapN.getPolygonVectorFeatures()
      let treeData = this.listData2TreeData(polygonArr)
      this.devicesCount.tree.dataList = polygonArr
      this.devicesCount.tree.gData = treeData
    },
    //设施数量查询开始
    onDevicesCountTreeExpand(expandedKeys) {
      this.devicesCount.tree.expandedKeys = expandedKeys
      this.devicesCount.tree.autoExpandParent = false
    },
    onDevicesCountTreeChange(e) {
      let value = e.target.value
      console.log(value)
      console.log(this.devicesCount.tree.dataList)
      let expandedKeys = this.devicesCount.tree.dataList.map((item) => {
        if (item.title.indexOf(value) > -1) {
          return getParentKey(item.key, this.devicesCount.tree.gData)
        }
        return null
      }).filter((item, i, self) => item && self.indexOf(item) === i)
      Object.assign(this.devicesCount.tree, {
        expandedKeys,
        searchValue: value,
        autoExpandParent: true,
      })
    },
    onDevicesCountTreeSelect(selectedKeys, info) {
      let polygonId = selectedKeys[0]
      this.devicesCount.tree.selectedKey = polygonId
      this.$refs.olMapN.localToFeature('Polygon', polygonId)
    },
    //设备类型选择
    onChangeDevicesCount(checkedList) {
      this.devicesCount.devicesType.indeterminate =
          !!checkedList.length && checkedList.length < this.devicesCount.devicesType.plainOptions.length
      this.devicesCount.devicesType.checkAll = checkedList.length === this.devicesCount.devicesType.plainOptions.length
    },
    //设备类型全选
    onCheckAllChangeDevicesCount(e) {
      let checkedList = []
      if (e.target.checked) {
        this.devicesCount.devicesType.plainOptions.forEach((element) => {
          checkedList.push(element.value)
        })
      }
      Object.assign(this.devicesCount.devicesType, {
        checkedList: checkedList,
        indeterminate: false,
        checkAll: e.target.checked,
      })
    },
    //查询
    devicesCountSearch() {
      this.devicesCount.table.totalNum = 0
      this.devicesCount.table.tableData = []
      let bufferIds = []
      let isBuffered = false
      if (this.devicesCount.tree.selectedKey != '000' && this.devicesCount.tree.selectedKey != '') {
        isBuffered = true
        let polygon = this.getFeatureById(this.devicesCount.tree.selectedKey)
        let bufferArr = []
        let pointArr = this.pointVector.getSource().getFeatures()
        pointArr.forEach((element) => {
          let geom = JSON.parse(element.geom)
          if (geom.length === 2) {
            bufferArr.push(element)
          }
        })
        let bufferRes = buffer(bufferArr, polygon)
        bufferRes.forEach((element) => {
          bufferIds.push(element.id)
        })
      }
      if (bufferIds.length === 0 && isBuffered) {
        return
      }
      if (this.devicesCount.devicesType.checkedList.length === 0) {
        this.$message.warn('至少勾选一项设施类型!')
        return
      }
      let param = {
        lineIds: bufferIds.join(','),
        scode: this.devicesCount.devicesType.checkedList.join(','),
      }
      this.getPointFeatureCount(
          param,
          function (res) {
            if (res === null) {
              this.$message.info('暂无符合条件的数据')
              return
            }
            res.forEach((element) => {
              element.scode = this.devicesCount.devicesType.map[element.scode]
              this.devicesCount.table.totalNum += Number(element.count)
            })
            this.devicesCount.table.tableData = res
          }.bind(this)
      )
    },
    //导出
    devicesCountExport() {
      if (this.devicesCount.table.tableData.length > 0) {
        this.$refs.olMapN.devicesCountExport(
            this.devicesCount.table.columns,
            this.devicesCount.table.tableData,
            '设施数量'
        )
      } else {
        this.$message.info('暂无数据')
      }
    },
    //设施数量查询结束
  },
}
</script>

<style lang="scss" scoped>
//@import '@/assets/less/comment-style.less';

.analysisContainer {
  width: 100%;
  height: 100%;
}

.analysisText {
  color: #FFD166
}

.analysisContainer .mapToolBar {
  width: 100%;
  height: 35px;
  background: #1890ff;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  /*border-bottom: red 2px solid;*/
  /*margin: 0 0 2px 0;*/
  justify-content: flex-end;
  /*float: right;*/
}

.analysisContainer .mapToolBar div {
  float: right;
  font-size: 14px;
}

.analysisContainer .mapToolBar .mapToolBarIcon {
  width: 20px;
  height: 20px;
}

.analysisContainer .mapToolBar .mapToolBarContainer {
  /*border-right: yellow solid 2px;*/
  /*padding: 0 10px;*/
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.analysisContainer .mapToolBar .mapToolBarContainer div {
  /*padding-left: 10px;*/
  cursor: pointer;
}

.analysisContainer .mapToolBar .mapToolBarContainer div:last-child {
  padding-right: 10px;
}

.analysisContainer .mapStatusBar {
  width: 100%;
  height: 30px;
  background: #fff;
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 2px;
}

.analysisContainer .mapStatusBar div {
  font-size: 15px;
  font-weight: bold;
}

.analysisContainer .mapStatusBar div:last-child {
  position: absolute;
  right: 0;
}

.analysisContainer .mapContainer {
  width: 100%;
  height: calc(100vh - 185px);
  float: left;
}

.analysisContainer .mapPopContainner {
  /* float: left;
  width: 0%; */
  display: none;
  background-color: white;
}

.analysisContainer .mapPopContainner .title-bar {
  display: flex;
  align-items: center;
  width: 100%;
  height: 30px;
  background: #1890ff;
  margin-left: auto;
}

.analysisContainer .mapPopContainner .title-bar .title-icon {
  width: 25px;
  height: 25px;
  margin-left: 5px;
}

.analysisContainer .mapPopContainner .title-bar .title-icon2 {
  width: 30px;
  height: 30px;
  margin: 0 5px 0 5px;
}

.analysisContainer .mapPopContainner .title-bar .title-tools {
  margin-left: auto;
  display: flex;
  padding: 0 10px 0 0;
}

.analysisContainer .mapPopContainner .title-bar .title-text {
  font-size: 14px;
  color: #FFFFFF;
  margin-left: 5px;
}

.analysisContainer .mapPopContainner .title-bar .close {
  font-size: 14px;
  color: #FFFFFF;
  margin-left: auto;
  margin-right: 10px;
  cursor: pointer;
}

.analysisContainer .mapPopContainner .mapPopContainnerDiv {
  padding: 5px;
  background-color: white;
}

.valveClosingPlan .ant-checkbox-group {
  height: 258px;
  margin-left: 25px;
  overflow: auto;
}

/*管线长度查询 */
.pipeLineLengthLeft .ant-card-meta-detail {
  overflow: unset;
  text-align: center;
}

.pipeLineLengthLeft .pipeMaterial .ant-checkbox-group,
.pipeLineLengthLeft .pipeDiameter .ant-checkbox-group {
  height: 165px;
  overflow: auto;
}

.pipeLineLengthLeft .ant-tree-child-tree-open {
  height: 128px;
  overflow: auto;
}

/*设施数量查询 */
.devicesCountLeft .ant-card-meta-detail {
  overflow: unset;
  text-align: center;
}

.devicesCountLeft .devicesType .ant-checkbox-group {
  overflow: auto;
}

.devicesCountLeft .ant-tree-child-tree-open {
  /*height: 128px;*/
  overflow: auto;
}

.connectivity-result {
  color: #1890ff;
  font-size: 18px;
  font-weight: bold;
}
</style>
